<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>添加用户</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../static/css/style.css" th:href="@{/css/style.css}"/>
</head>
<body>
<div th:replace="~{common/layout :: header}"></div>
<div th:replace="~{common/layout :: sidebar}"></div>
<div class="container mt-5">
    <h1 class="mb-4">添加用户</h1>
    <form action="#" th:action="@{/users/add}" th:object="${user}" method="post" class="form-horizontal" onsubmit="return validateForm()">
        <div class="form-group">
            <label class="control-label col-sm-2">用户手机号:</label>
            <div class="col-sm-10">
                <input type="text" th:field="*{userId}" class="form-control" id="userId" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">密码:</label>
            <div class="col-sm-10">
                <input type="password" th:field="*{password}" class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">用户姓名:</label>
            <div class="col-sm-10">
                <input type="text" th:field="*{realName}" class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">用户性别:</label>
            <div class="col-sm-10">
                <select th:field="*{sex}" class="form-control" required>
                    <option value="1">男</option>
                    <option value="0">女</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">身份证号:</label>
            <div class="col-sm-10">
                <input type="text" th:field="*{identityCard}" class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">生日:</label>
            <div class="col-sm-10">
                <input type="date" th:field="*{birthday}" class="form-control" required/>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2">用户类型:</label>
            <div class="col-sm-10">
                <select th:field="*{userType}" class="form-control" required>
                    <option value="1">普通</option>
                    <option value="2">内部员工</option>
                    <option value="3">其它</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary">提交</button>
            </div>
        </div>
    </form>
    <a href="/users" class="btn btn-default">返回用户列表</a>
</div>
<script>
    function validateForm() {
        var userId = document.getElementById("userId").value;
        if (userId.length !== 11) {
            alert("用户手机号必须是11位数字");
            return false;
        }
        return true;
    }
</script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
